<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul li,
        ol {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .banner {
            position: relative;
            width: 500px;
            height: 342px;
            margin: 100px auto;
        }
        
        .banner .imageList {
            width: 100%;
            height: 100%;
        }
        
        .banner .imageList img {
            width: 500px;
            height: 342px;
        }
        
        .banner .imageList li {
            position: absolute;
            width: 500px;
            height: 342px;
            opacity: 0;
            transition: opacity .5s linear;
        }
        
        .banner .imageList li.active {
            opacity: 1;
        }
        
        .banner .dots {
            position: absolute;
            height: 30px;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%);
        }
        
        .dots li {
            width: 15px;
            height: 15px;
            float: left;
            border-radius: 50%;
            background: rgba(0, 0, 0, .3);
            margin: 7px 5px;
        }
        
        .dots li.active {
            background-color: #fff;
        }
        
        .banner .arrows {
            position: absolute;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .banner .arrows span {
            display: block;
            color: #fff;
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, .3);
            font-size: 25px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
        
        .arrows .prev {
            float: left;
            border-radius: 0px 50px 50px 0px;
        }
        
        .arrows .next {
            float: right;
            border-radius: 50px 0px 0px 50px;
        }
    </style>
</head>

<body>
    <div class="banner">
        <ul class="imageList">
            <li class="active">
                <a href="#"><img src="images/zrn1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/zrn2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/zrn3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/lye1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/lye2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/zrn4.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images/zrn5.jpg" alt=""></a>
            </li>
        </ul>
        <ol class="dots">
        </ol>
        <div class="arrows">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
    </div>

    <script>
        window.addEventListener('load', () => {
            const banner = document.querySelector('.banner')
            const imageListBox = document.querySelector('.imageList')
            const dotsBox = document.querySelector('.dots')
            const prev = document.querySelector('.prev')
            const next = document.querySelector('.next')

            new Swiper(banner, imageListBox, dotsBox, prev, next, 'active', 'active', 1000)


        })

        function Swiper(banner, imageListBox, dotsBox, prev, next, dotActiveCls, imgActiveCls, expire) {
            this.banner = banner
            this.imageListBox = imageListBox
            this.activeIndex = 0 // 每次改变的索引

            // 图片的长度
            this.imageListLength = this.imageListBox.children.length
            this.dotsBox = dotsBox
            this.autoPlayTimer = null
            this.prev = prev
            this.next = next
            this.dotActiveCls = dotActiveCls
            this.imgActiveCls = imgActiveCls
            this.expire = expire
            this.init()
        }

        //初始化函数
        Swiper.prototype.init = function() {
            this.generateDots(); //生成聚焦点
            this.autoPlay() //自动播放
            this.bannerOverOut(); //鼠标进入暂定播放，鼠标离开继续播放
            this.bindEvent(); //实现前后按钮和聚焦按钮切换图片

        }

        //绑定事件，利用事件委托给前后按钮和聚焦按钮绑定事件，切换图片
        Swiper.prototype.bindEvent = function() {
            this.banner.addEventListener('click', (e) => {
                e = e || window.event;
                let target = e.target || e.srcElement;

                //上一张
                if (target.className == 'prev') {
                    this.changeImageThenFocusDot(false);
                }

                //下一张
                if (target.className == 'next') {
                    this.changeImageThenFocusDot(true);
                }

                // 是聚焦的小圆点，
                if (target.getAttribute('type') == 'pointer' && target.className != 'active') {
                    this.changeImageThenFocusDot(target.dataset.index);
                }
            })

        }

        //鼠标进入banner的时候停止定时器，移出的时候开启定时器
        Swiper.prototype.bannerOverOut = function() {
                this.banner.addEventListener('mouseenter', () => clearInterval(timer));
                this.banner.addEventListener('mouseleave', () => this.autoPlay());
            }
            //自动播放
        Swiper.prototype.autoPlay = function() {
            timer = setInterval(() => {
                this.changeImageThenFocusDot(true);
            }, this.expire)
        }


        //status 约定是boolean,当用户传入true，表示下一张，false表示上一张
        //如果用户传入数字，那么就直接定位
        // 切换图片并改变聚焦按钮
        Swiper.prototype.changeImageThenFocusDot = function(status) {
                this.imageListBox.children[this.activeIndex].classList.remove(this.dotActiveCls);
                this.dotsBox.children[this.activeIndex].classList.remove(this.imgActiveCls);
                if (status === true) {
                    this.activeIndex++;
                } else if (status === false) {
                    this.activeIndex--;
                } else {
                    this.activeIndex = status;
                }

                if (this.activeIndex == this.imageListBox.children.length) {
                    this.activeIndex = 0;
                }

                //当用户在第一张还点击上一张
                if (this.activeIndex < 0) {
                    this.activeIndex = this.imageListBox.children.length - 1;
                }
                this.imageListBox.children[this.activeIndex].classList.add('active');
                this.dotsBox.children[this.activeIndex].classList.add('active');
            }
            // 生成聚焦点
        Swiper.prototype.generateDots = function() {
            // 生成一个文档碎片
            let frg = document.createDocumentFragment();

            for (let i = 0; i < this.imageListLength; i++) {
                let dotElement = document.createElement('li');
                //目的是点击的时候利用事件委托
                dotElement.setAttribute('type', 'pointer');
                //给小圆点绑定相应索引
                dotElement.dataset.Index = i; //给小圆点li设置h5自定义属性data-index,值为i
                // 为第一个增加样式
                if (i == 0) {
                    dotElement.classList.add(this.dotActiveCls);
                }
                frg.appendChild(dotElement);
            }
            this.dotsBox.appendChild(frg);
        }
    </script>
</body>

</html>